<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { spaceUsageAnalyzeUsingPost } from '@/api/analyzeController.ts'
import { message } from 'ant-design-vue'
import { formatSize } from '@/utils'

//存储响应结果
const spaceUsageAnalyzeResponse = ref<API.SpaceUsageAnalyzeResponse>({})

interface Props {
  //空间 ID
  spaceId: string
  //是否查询公共图库
  queryPublic: boolean
  //全空间分析
  queryAll: boolean
}

const props = withDefaults(defineProps<Props>(), {
  queryAll: false,
  queryPublic: false,
})

async function spaceUsageAnalyze() {
  const resp = await spaceUsageAnalyzeUsingPost({
    spaceId: props?.spaceId,
    queryPublic: props?.queryPublic,
    queryAll: props?.queryAll,
  })
  if (resp.data.code === 0 && resp.data.data) {
    spaceUsageAnalyzeResponse.value = resp.data.data
  } else {
    message.error(resp.data.message)
  }
}

watchEffect(() => {
  spaceUsageAnalyze()
})
</script>

<template>
  <!--  图库分析组件-->
  <div id="analyzePicture">
    <a-card style="height: 320px" title="空间资源使用分析">
      <!--    空间大小使用情况分析,仪表盘-->
      <a-flex gap="middle">
        <a-card title="存储空间" style="width: 50%">
          <a-progress type="dashboard" :percent="spaceUsageAnalyzeResponse.sizeUsageRatio ?? 0" />
          <h3>
            {{ formatSize(spaceUsageAnalyzeResponse.usedSize) }} /
            {{
              spaceUsageAnalyzeResponse.maxSize ? formatSize(spaceUsageAnalyzeResponse.maxSize)
                : '无限制'
            }}
          </h3>
        </a-card>
        <a-card title="图片数量" style="width: 50%">
          <a-progress type="dashboard" :percent="spaceUsageAnalyzeResponse.countUsageRatio ?? 0" />
          <h3>
            {{spaceUsageAnalyzeResponse.usedCount}} /
            {{
              spaceUsageAnalyzeResponse.maxCount ?? '无限制'
            }}
          </h3>
        </a-card>
      </a-flex>
    </a-card>

  </div>
</template>

<style scoped></style>
